Meta Viewport

La metaetiqueta viewport permite que el navegador controle la escala y el tamaño de la página.

Imágenes Responsivas

Imagen con width: 100%:

Ejemplo width 100%

Imagen con max-width: 100%; y height: auto;:

Ejemplo max-width

Imagen Responsiva

El elemento picture permite definir distintas imágenes según el tamaño de pantalla.

F3

Texto Responsivo

HOLA

Este texto usa unidades para escalar según el ancho del navegador.

Media Queries

Left Menu
Main Content
Right Content

Ejemplo con W3.CSS

W3Schools Demo

Pagina responsiva

Londres

Capital del Reino Unido.

Paris

Capital de Francia.

Tokyo

Capital de Japón.

Ejemplo con Bootstrap 5

Pagina Bootstrap

Redimensiona para ver el efecto responsivo

Columna 1

solo texto aleatorio

Columna 2

solo texto

Columna 3

solo texto